import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  navigation,
  Image,
  ToastAndroid,
  Alert,
} from 'react-native';
import {Input, Button} from 'react-native-elements';

import {createStackNavigator, createAppContainer} from 'react-navigation';

import HttpUtil from '../utils/HttpUtil';
import Login from './Login';
// import Icon from 'react-native-vector-icons/FontAwesome';

class Register extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      email: '',
      password: '',
    };
  }

  doRegister() {
    const url = 'http://localhost:3000/api/user/register';
    const data = {
      email: this.state.email,
      username: this.state.username,
      password: this.state.password,
    };
    console.log(data);
    if (data.email == '' || data.password == '' || data.username == '') {
      Alert.alert('请输入账号密码用户名');
      return false;
    }
    HttpUtil.post(url, data)
      .then((res) => {
        if (res.code != 201) {
          Alert.alert('用户已存在');
        }
        Alert.alert('注册成功');
        this.props.navigation.navigate('Login');
        console.log(res);
      })
      .catch((err) => {
        if (err.code == -1) {
          Alert.alert('账号或密码错误');
        }
        console.log(err);
      });
    // console.log('username:' + this.state.username);
    // console.log('email:' + this.state.email);
    // console.log('password:' + this.state.password);
  }
  render() {
    return (
      <View style={styles.container}>
        <Image
          source={require('../assets/images/react.jpg')}
          style={styles.logo}
        />
        {/* <TextInput placeholder="请输入你的邮箱!" style={styles.username} /> */}
        {/* <TextInput placeholder="请输入你的密码!" style={styles.username} /> */}
        <Input
          placeholder="请输入你的用户名"
          // leftIcon={<Icon name="envelope" size={24} color="black" />}
          containerStyle={styles.username}
          onChangeText={(username) => this.setState({username})}
          autoCapitalize={false}
        />
        <Input
          placeholder="请输入你的邮箱"
          // leftIcon={<Icon name="envelope" size={24} color="black" />}
          containerStyle={styles.username}
          onChangeText={(email) => this.setState({email})}
          autoCapitalize={false}
        />
        <Input
          placeholder="请输入你的密码"
          // leftIcon={<Icon name="password" size={24} color="black" />}
          containerStyle={styles.username}
          secureTextEntry={true}
          onChangeText={(password) => this.setState({password})}
        />

        <Button
          title="注册"
          buttonStyle={styles.loginBtn}
          onPress={this.doRegister.bind(this)}
          //   accessibilityLabel="accessibilityLabel"
        />
        <Button
          title="返回"
          type="outline"
          buttonStyle={styles.registerBtn}
          onPress={() => this.props.navigation.navigate('Login')}
          //   accessibilityLabel="accessibilityLabel"
        />
        {/* <TextInput placeholder="请输入你的密码!" style={styles.username} /> */}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  logo: {
    width: 80,
    height: 80,
    marginTop: 120,
    borderRadius: 50,
    marginBottom: 20,
    //     backgroundColor: 'red',
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    width: 350,
    maxHeight: 300,
    //     backgroundColor: 'red',
  },
  username: {
    width: 250,
    height: 20,
    marginBottom: 40,
    //     borderBottomWidth: 1,
    paddingBottom: 15,
    borderColor: '#ff6600',
  },
  loginBtn: {
    width: 230,
    height: 40,
    fontSize: 18,
    lineHeight: 40,
    alignItems: 'center',
    color: '#ffffff',
    backgroundColor: '#ff6600',
    marginBottom: 20,
    marginTop: 10,
  },
  registerBtn: {
    //     color: '#ff6600',
    color: 'green',
    borderStyle: 'solid',
  },
});

export default Register;
